<eda-dialog [inject]="dialog">
  <div body>

    <div style="margin: 1em;">
      <p-progressBar *ngIf="activateProgressBar" mode="indeterminate" [style]="{'height': '0.3rem'}"></p-progressBar>
    </div>

    <!-- CASE chart + edaquery -->

    <div class="grid"
      *ngIf="controller.params.charttype !== 'table' && controller.params.charttype !== 'parallelSets'  && !controller.params.modeSQL">
      <div class="col-6">
        <h6 class="col-12" i18n="@@csvField" class="custom-border-b1">
          Campo
        </h6>
        <div class="col-12">
          <h6>{{column}}</h6>
        </div>
      </div>

      <div class="col-6">
        <h6 class="col-12" i18n="@@LinkDashboardSelectedDashboard" class="custom-border-b1">
          Informe a vincular
        </h6>
        <div class="col-12">
          <p-dropdown [options]="dasboards" [(ngModel)]="selectedDashboard" [disabled]="noLink"></p-dropdown>
        </div>
      </div>
    </div>



    <!-- CASE table + edaquery -->

    <div class="grid"
      *ngIf="(controller.params.charttype === 'table' || controller.params.charttype === 'parallelSets') && !controller.params.modeSQL">
      <div class="col-6">
        <h6 class="col-12" i18n="@@csvField" class="custom-border-b1">
          Campo
        </h6>
        <div class="col-12">
          <p-dropdown [options]="columns" placeholder="Column" [(ngModel)]="selectedColumn" [disabled]="noLink"
            (onChange)="initDashboards(selectedColumn)" optionLabel="colname"></p-dropdown>
        </div>
      </div>

      <div class="col-6">
        <h6 class="col-12" i18n="@@LinkDashboardSelectedDashboard" class="custom-border-b1">
          Informe a vincular
        </h6>
        <div class="col-12">
          <p-dropdown [options]="dasboards" [(ngModel)]="selectedDashboard" [disabled]="noLink"></p-dropdown>
        </div>

      </div>
    </div>

    <!-- CASE chart + sqlquery -->
    <div *ngIf="controller.params.modeSQL" class="grid">
      <div class="col-12">
        <h6 class="col-12" i18n="@@csvField" class="custom-border-b1">
          Campo
        </h6>
        <div class="col-12">
          <p-dropdown [options]="columns" placeholder="Column" [(ngModel)]="selectedColumn" [disabled]="noLink"
            (onChange)="initDashboards(selectedColumn)" optionLabel="colname"></p-dropdown>
        </div>
      </div>

      <div class="col-6">
        <h6 class="col-12" i18n="@@LinkDashboardDbFilter" class="custom-border-b1">
          Campo del informe
        </h6>
        <div class="col-12">
          <p-dropdown [options]="dasboards" [(ngModel)]="selectedDashboard" placeholder="Dashboard" [disabled]="noLink"
            (onChange)="filterFilters()"></p-dropdown>
        </div>
      </div>

      <div class="col-6">
        <h6 class="col-12" i18n="@@LinkDashboardSelectedDashboard" class="custom-border-b1">
          Informe a vincular
        </h6>
        <div class="col-12">
          <p-dropdown [options]="filters" [(ngModel)]="selectedFilter" optionLabel="colname" placeholder="Column"
            [disabled]="noLink" (onChange)="handleTargetColumn()"></p-dropdown>
        </div>
      </div>

    </div>



    <div *ngIf=" this.oldLinked " class="col-6">

      <h6>{{unLinkString}} {{oldLinked}} </h6>
      <p-inputSwitch id="switchQueryMode" class="col-1 sql-switch" #switchMode [(ngModel)]="noLink"
        tooltipPosition="left">
      </p-inputSwitch>

    </div>
  </div>

  <div footer>
    <div class="ui-dialog-buttonpanel ui-widget-content ui-helper-clearfix text-right">
      <button type="submit" pButton (click)="saveChartConfig()" icon="fa fa-check"
        class="p-button-raised p-button-success" i18n-label="@@guardarButton" label="Confirmar"
        id="eda_chart_dialog_confirmar" [disabled]="!selectedDashboard && !noLink">
      </button>
      <button type="button" pButton (click)="closeChartConfig()" icon="fa fa-times"
        class="p-button-raised p-button-danger" i18n-label="@@cancelarButton" label="Cancelar">
      </button>
    </div>
  </div>
</eda-dialog>